import React from 'react';
import { Row, Col } from 'antd';
import './index.less';

const ImageCol = ({ image }) => {
  return (
    <Col span={8}>
      <img src={image} className='image-text-image' alt='img' />
    </Col>
  )
}

const TextCol = ({ title, content }) => {
  return (
    <Col span={15}>
      <p className='image-text-title web-title'><span>{title}</span></p>
      <p className='image-text-content'>{content}</p>
    </Col>
  )
}

const ImageAtLeft = ({ title, content, image }) => {
  return (
    <Row>
      <ImageCol image={image} />
      <Col span={1} />
      <TextCol title={title} content={content} />
    </Row>
  )
}

const ImageAtRight = ({ title, content, image }) => {
  return (
    <Row>
      <TextCol title={title} content={content} />
      <Col span={1} />
      <ImageCol image={image} />
    </Row>
  )
}

const ImageText = ({ title, image, type, border, children }) => {
  const classNames = ['web-page-block', 'image-text'];
  const Component = type === 'right' ? ImageAtRight : ImageAtLeft;
  return (
    <div className={classNames.join(' ')}>
      <div className='web-page-block-content'>
        <Component title={title} image={image} content={children} />
        <br />
        {border ? <div className='border-line' /> : null}
      </div>
    </div>
  );
}

export default ImageText;